
<template>
  <div>
 <el-breadcrumb class="bread" separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    <el-breadcrumb-item>权限列表</el-breadcrumb-item>
  </el-breadcrumb>

      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          type="index"
           :index="indexMethod">
        </el-table-column>
        <el-table-column
          prop="authName"
          label="权限名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="path"
          label="路径"
          width="180">
        </el-table-column>
        <el-table-column
          prop="level"
          label="等级">
          <template slot-scope='scope'>
            <span v-if="scope.row.level==='0'">一级</span>
            <span v-else-if="scope.row.level==='1'">二级</span>
            <span v-else>三级</span>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {

  data () {
    return {
      tableData: [{
        authName: '',
        level: '',
        path: '',
        id: -1
      }]
    }
  },
  created () {
    this.loadAuthList()
  },

  methods: {
    async loadAuthList () {
      const res = await this.$axios.get('/rights/list')

      console.log(res)
      this.tableData = res.data.data
    },
    indexMethod (index) {
      return index
    }
  }

}
</script>

<style scoped>
.bread {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  padding-left: 20px;
  background: #d4dae0;
}
</style>
